<template>
    <view class="bg-[#F6F7F9] min-h-screen">
        <up-navbar title="设置" :safeAreaInsetTop="true" bgColor="#FFF" :placeholder="true">
            <template #left>
                <view class="flex px-[24rpx] py-[16rpx] border-[1rpx] border-slate-200 rounded-[38rpx]">
                    <up-icon name="arrow-left" size="19" @click="goback"></up-icon>
                    <up-line direction="column" :hairline="false" length="16" margin="0 8px"></up-line>
                    <up-icon name="home" size="20" @click="gohome"></up-icon>
                </view>
            </template>
        </up-navbar>
        <view class="my-[24rpx] mx-[30rpx] rounded-[16rpx] bg-[#fff] p-[30rpx]">
            <view class="flex justify-between items-center mb-[24rpx]">
                <view class="text-[28rpx] text-[#666] font-normal">用户头像</view>
                <button open-type="chooseAvatar" @chooseavatar="onchooseavatar"
                    class="btn mx-[0] flex justify-end items-center px-[0]">
                    <image :src="user.avatar" mode="scaleToFill" class="w-[72rpx] h-[72rpx] block rounded-[50%]" />
                    <image src="../static/right.png" mode="scaleToFill" class="w-[32rpx] h-[32rpx] block" />
                </button>
            </view>
            <view class="flex justify-between items-center">
                <view class="text-[28rpx] text-[#666] font-normal">用户名</view>
                <view class="flex items-center">
                    <input type="nickname" class="text-right" v-model="user.nickName" @blur="onblur" @input="oninput">
                    <image src="../static/right.png" border="none" mode="scaleToFill"
                        class="w-[32rpx] h-[32rpx] block" />
                </view>
            </view>
        </view>
        <view class="mb-[72rpx] rounded-[16rpx] bg-[#fff] p-[30rpx] mx-[30rpx]">
            <view class="flex justify-between items-center">
                <view class="text-[28rpx] text-[#666666] font-normal">手机号</view>
                <view class="flex items-center" @click="show = !show">
                    <view class="text-[28rpx] text-[#999] font-normal">{{ user.mobile ? user.mobile : '请输入手机号' }}</view>
                    <image src="../static/right.png" mode="scaleToFill" class="w-[32rpx] h-[32rpx] block" />
                </view>
            </view>
            <view class="flex justify-between items-center my-[24rpx]"
                @click="goToPage('/community/addressList/addressList')">
                <view class="text-[28rpx] text-[#666666] font-normal">收货地址</view>
                <image src="../static/right.png" mode="scaleToFill" class="w-[32rpx] h-[32rpx] block" />
            </view>
            <view class="flex justify-between items-center">
                <view class="text-[28rpx] text-[#666666] font-normal">协议说明</view>
                <image src="../static/right.png" mode="scaleToFill" class="w-[32rpx] h-[32rpx] block" />
            </view>
        </view>
        <view @click="LogOut"
            class="mx-[30rpx] py-[20rpx] rounded-[16rpx] bg-[#46A7FD] text-center text-[#fff] text-[32rpx] font-normal">
            退出登录
        </view>
        <up-popup :show="show" @close="close" mode="center" round="8" :closeOnClickOverlay="true">
			<view class="popupBox">
				<view class="title">绑定手机号</view>
				<view class="input">
					<up-input placeholder="请输入手机号" maxlength="11" type="number" border="surround"  v-model="value"
						></up-input>
				</view>
				<view class="Btn" @click="Submit">确定</view>
			</view>
		</up-popup>
    </view>
</template>

<script setup>
import env from '@/config/common.js'
import { onLoad } from '@dcloudio/uni-app'
import { GetUserInfo, UpdataInfo } from '../../API/user';
import { getToken, removeToken } from '../../utils/auth';
import { ref } from 'vue';
let baseUrl = env.API_BASE_URL_DEV
let user = ref({})
let show = ref(false)
let value = ref('')
function goback() {
    uni.navigateBack()
}
function gohome() {
    uni.switchTab({
        url: '/pages/index/index'
    })
}
async function getUserInfo() {
    let { data } = await GetUserInfo()
    user.value = data
}
function LogOut() {
    removeToken()
    uni.navigateTo({
        url: '/subPages/login/login'
    })
}
function onchooseavatar(e) {
    uni.uploadFile({
        url: baseUrl + '/auth/common/upload',
        fileType: 'image',
        filePath: e.detail.avatarUrl,
        name: 'file',
        header: {
            'Authorization': getToken()
        },
        success: async ({ data, statusCode }) => {
            let res = JSON.parse(data).url
            await UpdataUserInfo({ avatar: res })
        },
        fail: (error) => { }
    })
}
function onblur(e) {
   UpdataUserInfo({nickName: e.detail.value})
}
function oninput(e) {
    UpdataUserInfo({nickName: e.detail.value})
}
function goToPage(url) {
    uni.navigateTo({
        url: url
    })
}
function Submit(){
    UpdataUserInfo({mobile: value.value})
}
async function UpdataUserInfo(obj) {
    let res = await UpdataInfo(obj)
    await getUserInfo()
}
onLoad(async () => {
    await getUserInfo()
})
</script>

<style lang="scss" scoped>
.btn {
    background-color: transparent;

    &::after {
        border: none;
    }
}
.popupBox {
		padding: 40rpx;
		border-radius: 16rpx;

		.title {
			text-align: center;
			font-weight: bold;
			font-size: 36rpx;
			margin-bottom: 40rpx;
		}

		.input {
			margin-bottom: 40rpx;
		}

		.Btn {
			width: 530rpx;
			height: 96rpx;
			font-weight: bold;
			font-size: 36rpx;
			color: #46A7FD;
			text-align: center;
			line-height: 96rpx;
			background: rgba(70, 167, 253, 0.2);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
		}
	}
</style>